<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table{
				width: 300px;
				height: 300px;
				text-align: center;
				background-color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<table cellspacing="0" align="center">
			<tr>
				<td colspan="2"><b>送货地址确认</b></td>
			</tr>
			<tr>
				<td>省份:</td>
				<td>
					<select id="sheng" onchange="cascade()">
						<option value="0">--请选择省份--</option>
						<option value="河南省">河南</option>
						<option value="河北省">河北</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>城市:</td>
				<td>
					<select id="city" onchange="cascade2()">
						<option value="0">--请选择城市--</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>区:</td>
				<td>
					<select id="qu">
						<option value="0">--请选择区--</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>街道:</td>
				<td>
					<input type="text" id="jie" />
				</td>
			</tr>
			<tr>
				<td>门牌号:</td>
				<td>
					<input type="text" id="men" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="button" value="确认" onclick="tijiao()"/>					
				</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		var sheng;
		var city;
		var qu;
		var jie;
		var men;
		//获得节点
		function $(obj){
			return document.getElementById(obj);
		}
		//存
		function setS(keys,val){
			sessionStorage.setItem(keys,val)
		}
		//存值
		function tijiao(){
			setS("sheng",$('sheng').value);
			setS("city",$('city').value);
			setS("qu",$('qu').value);
			setS("jie",$('jie').value);
			setS("men",$('men').value);
			window.close();
		}
		//省市
		function cascade(){
			var sheng = new Array(2);
			sheng["河南省"] = ["郑州市","洛阳市","开封市"]
			sheng["河北省"] = ["石家庄","保定市","雄安市"]

			var val = $("sheng").value;
			$("city").options.length=1;
			for(var index in sheng[val]){
				var opt = new Option(sheng[val][index],sheng[val][index]);
				$("city").options.add(opt);
			}	
		}
		//市区
		function cascade2(){
			var city = new Array(6);
			city["郑州市"] = ["二七区","高新区","管城区","金水区"]
			city["洛阳市"] = ["充数区","充数区","充数区","充数区"]
			city["开封市"] = ["充数区1","充数区","充数区","充数区"]
			city["石家庄"] = ["充数区3","充数区3","充数区3","充数区3"]
			city["保定市"] = ["充数区4","充数区4","充数区4","充数区4"]
			city["雄安市"] = ["充数区","充数区","充数区","充数区"]
			
			var cyval = $("city").value
			$("qu").options.length=1;
			for(var index in city[cyval]){
				var opt = new Option(city[cyval][index],city[cyval][index]);
				$("qu").options.add(opt);
			}
			
		}
		
	</script>
</html>
